<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>mini-vue3</title>
</head>

<body>
  <div id="app"></div>
  <script src="./utils.js"></script>
  <script src="./renderer.js"></script>
  <script>
    const vnode = h('div', { class: 'why', id: 'aaa' },
      [
        h('h2', null, '当前计数: 100'),
        h("button", { onClick: function () { } }, '+1')
      ]
    )
    const app = document.querySelector("#app");
    mount(vnode, app);
    const newNode = h("div", { class: "coder" }, [
      h('h2', null, '当前计数: 100'),
      h("button", { onClick: function () { } }, '-1'),
      h("button", { onClick: function () { } }, '+1'),
    ]);
    setTimeout(() => {
      patch(vnode, newNode)
    }, 2000)
  </script>
</body>

</html>